<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详细内容</title>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css" type="text/css">
    <link rel="stylesheet" href="${newframe}/css/base/base.css" type="text/css">
    <link rel="stylesheet" href="${newframe}/css/common.css" type="text/css">
    <link rel="stylesheet" href="${assets}/plugins/ztree/zTreeStyle/metro.css" type="text/css">
    <!--[if IE 8]>
	<link rel="stylesheet" href="${newframe}/css/base/IE8.css" type="text/css"/>
	<![endif]-->
    <%@ include file="/WEB-INF/jsp/component/commonBottom.jsp" %>
    <script src="${assets}/bootstrapValidator/js/bootstrapValidator.js"></script>
    <script src="${assets}/bootstrapValidator/js/language/zh_CN.js"></script>
    <script src="${assets}/plugins/ztree/jquery.ztree.all-3.5.min.js"></script>
    <style>
        .pdn{
            padding-left: 0;
            padding-right: 30px;
        }
        .mg14{
            margin-right: 14px;
        }
        .help-block {
            z-index: 999;
            position: absolute;
            margin-top: 0px;
        }
    </style>
    <script>
        $(document).ready(function () {
            $('#myForm').bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    largeArea: {
                        validators: {
                            notEmpty: true
                        }
                    },
                    provinceArea: {
                        validators: {
                            notEmpty: true
                        }
                    },
                    cityArea: {
                        validators: {
                            notEmpty: true
                        }
                    },
                    hospName: {
                        validators: {
                            notEmpty: true,
                            remote: {
                                type: "post",
                                delay: 500,
                                url: '${URL_HL_HOSPITAL_VALIDATE_NAME}',
                                data: function (validator) {
                                    return {
                                        mobile: validator.getFieldElements('hospName').val(),
                                        exception: '${entity.hospName}'
                                    };
                                },
                                message: '该医院已存在'
                            }
                        }
                    },
                    hosLevel: {
                        validators: {
                            notEmpty: true
                        }
                    }
                }
            }).on('success.form.bv', function (e) {
                e.preventDefault();

                console.log("============================================");
                console.log($("#id").val());

                $("#areaCode").val(getDetailAreaCode());
                var _url="";
                if($("#id").val() == null || $("#id").val() == ''){
                    _url =  '${URL_HL_HOSPITAL_ADD}';
                }else{
                    _url =  '${URL_HL_HOSPITAL_UPDATE}';
                }

                $("input[name='depId']").each(function(){
                    var checkBox= this;
                    if(this.checked == true){
                        setCheckBoxInputDisabled(checkBox,false);
                    }else{
                        setCheckBoxInputDisabled(checkBox,true);
                    }
                });

                $.ajax({
                    url: _url,
                    type: 'post',
                    data:$('#myForm').serialize(),
                    async: false, //默认为true 异步
                    error: function (data) {
                        console.log("error================="+data);
                        console.log(data);
                        console.log("error================="+data);
                        alert('error');

                        $("input[name='depId']").each(function(){
                            var checkBox= this;
                            setCheckBoxInputDisabled(checkBox,false);
                        });
                    },
                    success: function (data) {
                        closeFrame();
                    }
                });

            });
        });
        //关闭并刷新
        function closeFrame() {
            window.parent.closeModal();
        }

        $(function () {
            $("#largeArea").change(function() {
                if(this.value==null || this.value==""){
                    resetArea(0);
                }else{
                    getLowerAreaList("provinceArea",this.value,0);
                    resetArea(1);
                }
            });
            $("#provinceArea").change(function() {
                if(this.value==null || this.value==""){
                    resetArea(1);
                }else{
                    getLowerAreaList("cityArea",this.value,1);
                    resetArea(2);
                }
            });
            $("#cityArea").change(function() {
                if(this.value==null || this.value==""){
                    resetArea(2);
                }else{
                    getLowerAreaList("countyArea",this.value,2);
                    resetArea(3);
                }
            });
            $("#countyArea").change(function() {
                if(this.value==null || this.value==""){
                    resetArea(3);
                }else{
                    getLowerAreaList("townArea",this.value,3);
                    resetArea(4);
                }
            });
            $("#townArea").change(function() {
                if(this.value==null || this.value==""){
                    resetArea(4);
                }else{
                    getLowerAreaList("villageArea",this.value,4);
                    resetArea(5);
                }
            });

            /**
             * 后台获取下级列表
             * */
            function getLowerAreaList(id,code,level){
                $.ajax({
                    url:'${ctx}/area/getLowerAreaList',
                    type:'post',
                    data:'code='+code+"&level="+level,
                    async : false, //默认为true 异步
                    dataType : 'json',
                    error:function(){
                        alert('error');
                    },
                    success:function(data){
                        var objs = document.getElementById(id);
                        objs.options.length = 1;
                        var area = data;
                        for(var i=0;i<area.length;i++){
                            var childOption = document.createElement("option");
                            childOption.value = area[i].code;
                            childOption.innerHTML = area[i].name;
                            objs.appendChild(childOption);
                        }
                    }
                });
            }

            $('#myForm').bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    hospName: {
                        group: '.col-sm-10',
                        validators: {
                            notEmpty: true
                        }
                    },
                    largeArea: {
                        group: '.col-sm-3',
                        validators: {
                            notEmpty: true
                        }
                    },
                    provinceArea: {
                        group: '.col-sm-3',
                        validators: {
                            notEmpty: true
                        }
                    },
                    cityArea: {
                        group: '.col-sm-4',
                        validators: {
                            notEmpty: true
                        }
                    }
                }
            }).on('success.form.bv', function (e) {
                e.preventDefault();
                $("#areaCode").val(getDetailAreaCode());
                $.ajax({
                    url:'${URL_ADM_HOSP_ADD}',
                    type:'post',
                    data:$('#myForm').serialize(),
                    async : false, //默认为true 异步
                    error:function(){
                        alert('error');
                    },
                    success:function(data){
                        window.parent.closeModal("add");
                    }
                });
            });

            //关闭弹出框
            $("#closeModalButt").on("click",function(){
                window.parent.simpleCloseModal("add");
            });
        });
        /**
         * 重置下级菜单
         * */
        function resetArea(level){
            if(level<1){
                var provinceArea = document.getElementById("provinceArea");
                provinceArea.options.length = 1;
            }
            if(level<2){
                var cityArea = document.getElementById("cityArea");
                cityArea.options.length = 1;
            }
            if(level<3){
                var countyArea = document.getElementById("countyArea");
                countyArea.options.length = 1;
            }
            if(level<4){
                var townArea = document.getElementById("townArea");
                townArea.options.length = 1;
            }
            if(level<5){
                var villageArea = document.getElementById("villageArea");
                villageArea.options.length = 1;
            }
        }

        /**
         * 获取最详细地址code
         * */
        function getDetailAreaCode(){
            var villageArea = $("#villageArea").val();//村code
            var townArea = $("#townArea").val();//镇code
            var countyArea = $("#countyArea").val();//县code
            var cityArea = $("#cityArea").val();//市code
            var provinceArea = $("#provinceArea").val();//省code
            var largeArea = $("#largeArea").val();//大区code
            if(villageArea!=null && villageArea!=""){
                return villageArea;
            }else if(townArea!=null && townArea!=""){
                return townArea;
            }else if(countyArea!=null && countyArea!=""){
                return countyArea;
            }else if(cityArea!=null && cityArea!=""){
                return cityArea;
            }else if(provinceArea!=null && provinceArea!=""){
                return provinceArea;
            }else if(largeArea!=null && largeArea!=""){
                return largeArea;
            }else{
                return "";
            }
        }

        /**
         * 设置科室多选框后面的科室别名输入框  是否有效
         * checkBox：多选框
         * disabledFlag：是否有效标记  true：失效，false：有效
         * */
        function setCheckBoxInputDisabled(checkBox,disabledFlag){
            var i = 0;//科室checkBox的排列索引
            var j = 0;//科室checkBox后面的输入框的排列索引
            $("input[name='depId']").each(function(){
                i++;
                if($(this)[0]==checkBox){
                    return false;
                }
            });
            $("input[name='showName']").each(function(){
                j++;
                if(j==i){
                    if(disabledFlag){
                        $(this).attr("disabled","disabled");
                    }else{
                        $(this).removeAttr("disabled");
                    }
                    return false;
                }
            });
        }
        function changeDepartment(thisCheckBox){
            if(!thisCheckBox.checked){
                top.bootbox.dialog({
                    message: "取消与该科室的关联，系统会同时取消该科室下的医生与科室和医院的关联",
                    buttons: {
                        OK: {
                            label: "确定",
                            className: "btn-primary",
                            callback: function () {

                            }
                        },
                        Cancel: {
                            label: "取消",
                            className: "btn-default",
                            callback: function () {
                                thisCheckBox.checked = true;
                            }
                        }
                    }
                });
            }
        }


        /**
         * ztree
         */
        var setting = {

            check: {
                enable: true,
                chkStyle: "radio",
                radioType: "all"
            },

            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                beforeClick: beforeClick,
                onCheck: onCheck
            }
        };

        var zNodes = ${organis};

        function setCheck() {
            var zTree = $.fn.zTree.getZTreeObj("organiTree");
            console.log(zTree);
        }
        function beforeClick(treeId, treeNode, clickFlag) {
            var zTree = $.fn.zTree.getZTreeObj("organiTree");
            zTree.checkNode(treeNode, !treeNode.checked, null, true);
            return false;
        }

        $(document).ready(function () {
            $.fn.zTree.init($("#organiTree"), setting, zNodes);
            setCheck();
        });
        function onCheck(e, treeId, treeNode) {
            if(treeNode.checked) {
                $("#organiId").val(treeNode.id);
            }else {
                $("#organiId").val(null);
            }
        }
    </script>
</head>
<body style="width: 98%">
<form id="myForm" class="form-horizontal" method="post" style="height:450px;">
    <input type="hidden" id="id" name="id" value="${entity.id}"/>
    <input type="hidden" id="areaCode" name="areaCode" value="" />
    <input type="hidden" id="organiId" name="organiId" value="${entity.organiId}"/>
    <div class="form-group col-sm-12">
        <label class="col-sm-2 control-label">地区</label>
        <div class="col-sm-3 mg14" style="padding-left: 10px ">
            <select id="largeArea" name="largeArea" class="form-control">
                <option value="">大区</option>
                <c:choose>
                    <c:when test="${entity == null}">
                        <c:forEach items="${largeAreaList}" var="largeArea">
                            <option value="${largeArea.largeAreaCode}">${largeArea.largeAreaName}</option>
                        </c:forEach>
                    </c:when>
                    <c:otherwise>
                        <c:forEach items="${provinceList}" var="areaCode">
                            <option value="${areaCode.code}" <c:if test="${areaCode.code==provinceCode}">selected="selected"</c:if> >${areaCode.name}</option>
                        </c:forEach>
                    </c:otherwise>
                </c:choose>
            </select>
        </div>
        <div class="col-sm-3 mg14">
            <select id="provinceArea" name="provinceArea" class="form-control">
                <option value="">省</option>
                <c:if test="${entity != null}">
                    <c:forEach items="${provinceList}" var="areaCode">
                        <option value="${areaCode.code}" <c:if test="${areaCode.code==provinceCode}">selected="selected"</c:if> >${areaCode.name}</option>
                    </c:forEach>
                </c:if>
            </select>
        </div>
        <div class="col-sm-3 mg14">
            <select id="cityArea" name="cityArea" class="form-control">
                <option value="">市</option>
                <c:if test="${entity != null}">
                    <c:forEach items="${cityList}" var="areaCode">
                        <option value="${areaCode.code}" <c:if test="${areaCode.code==cityCode}">selected="selected"</c:if> >${areaCode.name}</option>
                    </c:forEach>
                </c:if>
            </select>
        </div>
    </div>
    <div class="form-group col-sm-12">
        <label class="col-sm-2 control-label"></label>
        <div class="col-sm-3 mg14" style="padding-left: 10px ">
            <select id="countyArea" class="form-control">
                <option value="">县</option>
                <c:if test="${entity != null}">
                    <c:forEach items="${countyList}" var="areaCode">
                        <option value="${areaCode.code}" <c:if test="${areaCode.code==countyCode}">selected="selected"</c:if> >${areaCode.name}</option>
                    </c:forEach>
                </c:if>
            </select>
        </div>
        <div class="col-sm-3 mg14">
            <select id="townArea" class="form-control">
                <option value="">镇</option>
                <c:if test="${entity != null}">
                    <c:forEach items="${townList}" var="areaCode">
                        <option value="${areaCode.code}" <c:if test="${areaCode.code==townCode}">selected="selected"</c:if> >${areaCode.name}</option>
                    </c:forEach>
                </c:if>
            </select>
        </div>
        <div class="col-sm-3 mg14">
            <select id="villageArea" class="form-control">
                <option value="">村</option>
                <c:if test="${entity != null}">
                    <c:forEach items="${villageList}" var="areaCode">
                        <option value="${areaCode.code}" <c:if test="${areaCode.code==villageCode}">selected="selected"</c:if> >${areaCode.name}</option>
                    </c:forEach>
                </c:if>
            </select>
        </div>
    </div>
        <div class="form-group col-sm-6">
            <label class="col-sm-4 control-label">医院名称</label>
            <div class="col-sm-8">
                <input type="text" id="hospName" name="hospName" class="form-control" value="${entity.hospName}">
            </div>
        </div>
        <div class="form-group col-sm-6">
            <label class="col-sm-4 control-label">医院简称</label>
            <div class="col-sm-8">
                <input type="text" id="hospShortName" name="hospShortName" class="form-control" value="${entity.hospShortName}">
            </div>
        </div>
        <div class="form-group col-sm-6">
            <label class="col-sm-4 control-label">医院地址</label>
            <div class="col-sm-8">
                <input type="text" id="hospAddress" name="hospAddress" class="form-control" value="${entity.hospAddress}">
            </div>
        </div>
        <div class="form-group col-sm-6">
            <label class="col-sm-4 control-label">医院等级</label>
            <div class="col-sm-8">
                <select id="hosLevel" name="hosLevel" class="form-control">
                    <medi:configOpt name="hosp_lvl" key="${entity.hosLevel}"/>
                </select>
            </div>
        </div>
        <div class="form-group col-sm-6">
            <label class="col-sm-4 control-label">联系电话</label>
            <div class="col-sm-8">
                <input type="text" id="contactPhone" name="contactPhone" class="form-control" value="${entity.contactPhone}">
            </div>
        </div>
        <div class="form-group col-sm-6">
            <label class="col-sm-4 control-label">医院联系人</label>
            <div class="col-sm-8">
                <input type="text" id="contacts" name="contacts" class="form-control" value="${entity.contacts}">
            </div>
        </div>
    <div class="form-group col-sm-12">
        <label class="col-sm-2 control-label">科室</label>
        <div class="col-sm-10" style="padding-left: 10px ">
            <c:forEach items="${departmentList}" var="department">
                <label class="col-sm-4 pdn">
                    <label class="checkbox-inline" class="col-sm-12">
                        <input type="checkbox" name="depId"
                        <c:if test="${hdList !=null }">
                        <c:forEach items="${hdList}" var="hb">
                        <c:if test="${department.id == hb.depId}">
                               checked="checked" onchange=""
                        </c:if>
                        </c:forEach>
                        </c:if>
                               value="${department.id}">
                        <input class="form-control col-sm-8" disabled="disabled" name="showName" value="${department.depName}">
                    </label>
                </label>
            </c:forEach>
        </div>
    </div>
    <div class="form-group col-sm-6">
        <label class="col-sm-4 control-label">机构</label>
        <div class="col-sm-8">
            <ul id="organiTree" class="ztree"></ul>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="modal-footer" style="text-align: center;padding-bottom:70px; ">
        <button type="button" class="btn btn-default" data-dismiss="modal" id="closeModalButt" onclick="closeFrame()">
            关闭
        </button>
        <button type="submit" class="btn btn-primary">保存</button>
    </div>
</form>
</body>
</html>